<template>
  <div class="locks-menu borderStyle">
    <div class="locks-menu-substate centerbox">
      <span>变电站：</span>
      <el-select v-model="substaVal" @change="stationChange" filterable placeholder="请选择" >
        <el-option
          v-for="item in stationName_options"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        ></el-option>
      </el-select>
    </div>
    <div
      class="locks-menu-row startbox"
      v-for="(item,index) of newLeftData"
      :key="index"
      :class="{'row-active': mActive == item.Mpath}"
      @click="switchRouter(item)"
    >
      <div :class="item.iconfont" class="icon-color iconfont"></div>
      <div>{{item.name}}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { publicAPIModule } from "@/store/modules/public";
import { LocksAPIModule } from "@/store/modules/locks";
interface Menu {
  name: string;
  Mpath: string;
  iconfont: string;
  objId: string;
}
@Component
export default class LocksMenu extends Vue {
  substaVal: string = "";
  mActive: string = "LockControlPage";
  menuList: Array<Menu> = [
    {
      name: "智能锁控",
      Mpath: "LockControlPage",
      iconfont: "iconsuojuguanli_huaban",
      objId: "AD2BAB3E56EE1ECEE0537FD7A8C053B2",
    },
    {
      name: "门禁控制",
      Mpath: "EntranceGuardPage",
      iconfont: "icontree_main_access_control",
      objId: "AD2BAB3E56EF1ECEE0537FD7A8C053B2",
    },
    {
      name: "五防钥匙箱",
      Mpath: "KeyBoxPage",
      iconfont: "iconyuechixiang",
      objId: "AD2BAB3E56F01ECEE0537FD7A8C053B2",
    },
    {
      name: "一匙通",
      Mpath: "KeyLinksPage",
      iconfont: "iconi-small-key",
      objId: "AD2BAB3E56F11ECEE0537FD7A8C053B2",
    },
  ];

  leftData = [];
  // 有数据变电站
  get stationName_options() {
    return publicAPIModule.queryHasDataStationsList;
  }

  // 监听下拉框的值 调取菜单接口
  @Watch("substaVal")
  public aaaa() {
    let item = this.stationName_options.filter(
      (o) => o.code === this.substaVal
    )[0];
    if (item) {
      LocksAPIModule.setStationName(item);
    }
    this.getLeftmenu(this.substaVal);
  }

  @Watch("$route", { immediate: true, deep: true })
  public changeRouter(to: any) {
    this.mActive = to.path.split("/")[2];
    this.substaVal=to.query.code
  }
  public switchRouter(val: any) {
    var items = this.$route.query;
    this.$router.push({
      path: val.Mpath,
      query: items,
    });
  }
  //变电站下拉框改变 改变路由内容
  stationChange(val) {
    let resultArr = this.stationName_options.filter((item) => {
      return item.code === val;
    });
    let path = this.$route.path;
    this.$router.push({
      path: path,
      query: {
        code: resultArr[0].code,
        name: resultArr[0].name,
      },
    });
  }
  // 获取左侧菜单
  private getLeftmenu(stationId) {
    let form = {
      stationId: stationId,
      type: "锁控系统",
    };
    (this as any).$services
      .getAuxiliaryMenu({ data: form, method: "get" })
      .then((result: any) => {
        // console.log("result111111111:", result);
        if (result.data) {
          let data = result.data;
          this.leftData = data;
          // this.getDealLeftData();
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 处理左侧数据
  // getDealLeftData() {
  //   this.menuList.map((item, index) => {
  //     if (this.leftData[index]) {
  //       this.leftData[index].iconfont = item.iconfont || "";
  //       this.leftData[index].Mpath = item.Mpath || "";
  //       this.leftData[index].name = item.name || "";
  //     }
  //   });
  // }
  get newLeftData() {
    // let data = [];
    let menuList = this.menuList; //data里写死的四条数据
    let leftData = this.leftData; //接口获取的
    let menuobj = {
      AD2BAB3E56EE1ECEE0537FD7A8C053B2: {
        name: "智能锁控",
        Mpath: "LockControlPage",
        iconfont: "iconsuojuguanli_huaban",
      },
      AD2BAB3E56EF1ECEE0537FD7A8C053B2: {
        name: "门禁控制",
        Mpath: "EntranceGuardPage",
        iconfont: "icontree_main_access_control",
      },
      AD2BAB3E56F01ECEE0537FD7A8C053B2: {
        name: "五防钥匙箱",
        Mpath: "KeyBoxPage",
        iconfont: "iconyuechixiang",
      },
      AD2BAB3E56F11ECEE0537FD7A8C053B2: {
        name: "一匙通",
        Mpath: "KeyLinksPage",
        iconfont: "iconi-small-key",
      },
    };
    if (leftData.length > 0) {
      for (let key in menuobj) {
        leftData.map((k) => {
          if (k.objId == key) {
            k["Mpath"] = menuobj[key].Mpath;
            k["iconfont"] = menuobj[key].iconfont;
          }
          return k;
        });
      }
    }

    // console.log('leftData:',leftData);
    return leftData;
  }

  private mounted(): void {
    if (this.$route.query.name) {
      var item = this.$route.query;
      (this as any).substaVal = item.code;

    LocksAPIModule.setStationName({
      code:this.$route.query.code,
      name:this.$route.query.name
    })
    }

  }
}
</script>

<style lang="scss" scoped>
.locks-menu {
  width: 3.03rem;
  height: 100%;
  box-sizing: border-box;
  &-substate {
    height: 0.8rem;
    
  }
  &-row {
    width: 100%;
    height: 0.64rem;
    border: 1px solid rgba(95, 115, 171, 0.45);
    cursor: pointer;
    .iconfont {
      font-size: 0.19rem;
      margin: 0 0.2rem;
    }
  }
  &-row:hover {
    background: linear-gradient(
      90deg,
      rgba(20, 123, 252, 1) 0%,
      rgba(20, 123, 252, 1) 52%,
      rgba(20, 123, 252, 0.78) 63%,
      rgba(20, 123, 252, 0) 100%
    );
    opacity: 0.65;
  }
  .row-active {
    background: linear-gradient(
      90deg,
      rgba(20, 123, 252, 1) 0%,
      rgba(20, 123, 252, 1) 52%,
      rgba(20, 123, 252, 0.78) 63%,
      rgba(20, 123, 252, 0) 100%
    );
  }
}
</style>